<template>
    <div class="u-chartsBox">
        <div class="chartsM" :id="'chartsBox_line'+keyId"></div>
    </div>
</template>
<script>
import "@/utils/utils"
export default {
    name:'ULineEchart',
    props:{
        keyId:{},               //唯一echart
        xAxisName:{},
        yAxisName:{},
        legend: Array,
        list: Array,
        fontNomal:Boolean,
        isHasScatter: Boolean,
        smooth:Boolean,                  //折线是否平滑    
        grid:{
            type: Object,
            default: function(){
                return {
                        top:0,
                        left:0,
                        right:0,
                        bottom:0
                    }
            }
        }  
    },
    data(){
        return{
            chartsObj: null,
            option:{}
        }
    },
    methods:{
        initChart(){
            this.chartsObj = this.$echarts.init(document.getElementById('chartsBox_line'+this.keyId));
            let len = this.list[0].value.length
            let dataAxis = []                   //横坐标
            let dataInfo = {} ;
            let seriesData = []
            let visualMap;
            let markLineColor = '';
            let seriesItem = {
                type: 'line',
                symbol:'circle',
                symbolSize:12,
                smooth: this.smooth,
                itemStyle:{
                    borderColor:'#fff',
                    borderWidth:2
                },
                lineStyle:{
                    width:4,
                    // shadowColor: 'rgba(253, 182, 40, .4)',
                    shadowBlur: 16,
                    shadowOffsetY:5,
                },
                z:2,
            }
            dataAxis = this.list.map(({name}) => name)
            
            let scatterData = []
            let scatterMartLine = []
            if(this.isHasScatter){
                this.list.forEach((item, index) => {
                    let value = item.value[0]
                    let spec = this.legend.filter(item =>{ return value<=item.max&&value>item.min})[0]
                    scatterData.push({value:'-'})
                    if(spec){
                        let {color,isSign} = spec
                        scatterData[index] = {value:value,color:color,isSign:isSign}
                        markLineColor = color
                        scatterMartLine.push({xAxis:index})
                    }
                });
            }

            for(let i=0; i<len; i++){
                dataInfo[i] = this.list.map(item => {
                    return parseFloat(item.value[i]/10000)
                })
                let itemStyle = {...seriesItem.itemStyle}
                let lineStyle = {...seriesItem.lineStyle}
                let isShadow= this.legend[i].areaStyleColor?this.legend[i].areaStyleColor:"#fff"
                itemStyle.color = this.legend[i].color
                lineStyle.shadowColor = this.legend[i].color.colorRGBA(.4)
                let areaStyle = {
                    opacity:.2,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: isShadow.colorRGBA()
                    }, {
                        offset: .8,
                        color: isShadow.colorRGBA(0)
                    }])
                }
                console.log(dataInfo[i],'dataInfo[i]')
                seriesData.push({...seriesItem,itemStyle,lineStyle,areaStyle,data:dataInfo[i],name:this.legend[i].name})
                
            }

            let {left,right,top,bottom} = this.grid

            this.option = {
                legend: {
                    show: false,
                },
                grid:{
                    left: left?left:40,
                    right: right?right:(this.xAxisName?70:0),
                    top: top?top:60,
                    bottom:bottom?bottom:60,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle:{
                            color: 'rgba(57,100,247,0.1)',
                        },
                        z:1
                    },
                 
                    formatter: (params)=>{
                        let mapParams = params.filter(val => {return val.componentSubType =='line'})
                        let item = mapParams[0]
                        if(mapParams.length==1) 
                            return item.name+'<br><span class="tooltip_span">'+(item.value*10000)+'</span>人'
                        else{
                            let spanVal = ''
                            mapParams.forEach((every,index) => {
                                spanVal +='<br><span><i class="tooltip_icon" style="background:'+every.color+'"></i>'+every.seriesName+"："+every.value+'</span>'
                            })
                            return '<span class="tooltip_title">'+item.name+'</span>'+spanVal
                        }
                    },
                    backgroundColor: "#ffffff",
                    padding: 16,
                    textStyle:{
                        color:"#333333",
                        lineHeight: 30
                    },
                    extraCssText: 'box-shadow: 0 1px 10px rgba(59, 100, 168, 0.2);'
                },
                xAxis: {
                    type: 'category',
                    data: dataAxis,
                    name: this.xAxisName,
                    // min:-1,
                    // boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#f5f6f8'
                        }
                    },
                    axisLabel: {
                        rotate:this.fontNomal?'':'45',
                        textStyle:{
                            color:(params,index) =>{
                                let itemcolor = this.list[index].color?this.list[index].color:'#747e93'
                                if(this.isHasScatter)
                                    return scatterData[index].color?scatterData[index].color:itemcolor
                                return itemcolor
                            }
                        },
                    },
                },
                yAxis: {
                    name: this.yAxisName,
                    nameGap: 10,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        // show:false,
                        lineStyle:{
                            color:"rgba(255, 255, 255, 0.2)"
                        },
                    },
                    nameTextStyle: {
                        align:'left'
                    },
                    type: 'value',
                    axisLabel: {
                        formatter: (params)=>{
                            if(params ==0){
                              return 0
                            }
                            return params
                        }
                    },
                },
                visualMap: visualMap,
                textStyle:{
                    color: 'rgba(255, 255, 255, 0.2)',
                    fontSize: 14,
                },
                series: seriesData
            };
            if(this.isHasScatter){
                this.option.series.push({
                    type: 'scatter',
                    data: scatterData.map(({value}) => value),
                    symbolSize:12,
                    itemStyle:{
                        color:(params) =>{
                            let {dataIndex} = params
                            return scatterData[dataIndex].color
                        },
                        borderColor:'#fff',
                        borderWidth:2,
                    },
                    z:2,
                })
            }

            // 使用刚指定的配置项和数据显示图表。
            this.chartsObj.setOption(this.option);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
        setChart(chartData){
            chartData = chartData || {}
            this.chartsObj.hideLoading()
            this.chartsObj.setOption(chartData);
            window.addEventListener("resize",() =>{
                this.chartsObj.resize();
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.u-chartsBox /deep/ {
	width: 100%; height: 100%;
  position: relative;
  .chartsM{
      width: 100%; height: 100%;
      
  }
}
</style>